import React from 'react';
import {Button, Card, Descriptions, Flex, Space} from "antd";
import {Link, useLocation, useNavigate} from "react-router-dom";
import {SecurityRole} from "type/entity/SecurityRole";
import {CloseOutlined, UpCircleOutlined, BranchesOutlined} from "@ant-design/icons";

const RoleDetailsComponent = () => {
    const role = useLocation().state as SecurityRole;
    const navigate = useNavigate();
    const delRole = () => navigate("../delete", {state: role});
    const updateRole = () => navigate("../update", {state: role});
    const authorityPath = () => navigate("../path", {state: role});

    return (
        <Card title={`角色详情 - ${role.authority}`} extra={<Link to={".."}>角色列表</Link>}>
            <Flex style={{margin: "10px 5px"}} justify={"space-between"} gap={50}>
                <Space>
                    <Button type={"primary"} danger icon={<CloseOutlined/>} onClick={delRole}>删除角色</Button>
                    <Button type={"primary"} icon={<UpCircleOutlined/>} onClick={updateRole}>更新角色</Button>
                </Space>
                <Button style={{ backgroundColor: "#00B96B" }} type={"primary"} icon={<BranchesOutlined />} onClick={authorityPath}>路径权限</Button>
            </Flex>
            <Descriptions
                style={{userSelect: "none"}}
                bordered
                column={2}
                size={"middle"}
                layout={"horizontal"}
                items={[
                    { label: "角色编号", children: role.id },
                    { label: "角色权重", children: role.weight },
                    { label: "唯一标识", children: role.key, span: 2 },
                    { label: "角色定义", children: role.authority },
                    { label: "角色描述", children: role.explain },
                    { label: "创建时间", children: role.createTime.toString()},
                    { label: "更新时间", children: role.updateTime.toString()},
                    { label: "数据排序", children: role.order},
                    { label: "数据版本", children: role.version},
                    { label: "备注信息", children: role.remark},
                ]}
            />
        </Card>
    );
};

export default RoleDetailsComponent;